@import (reference) '../../main.less';

.wdu-carousel {
    margin: 16px;
    overflow   : hidden;
    .w-box();
    .w-radiu-normal();
    .out-shadow-normal();
}

.wdu-carousel-containner {
    .w-box();
    height: 100%;
    position: relative;
}

.wdu-carousel-last {
    position  : absolute;
    left      : 0;
    width     : 50px;
    background: none;
}

.wdu-carousel-next {
    position  : absolute;
    right     : 0;
    margin    : auto 0;
    width     : 50px;
    background: none;
    visibility: visible;
}

.wdu-carousel-last,
.wdu-carousel-next {
    .center();
    height : 100%;
    cursor : pointer;
    z-index: 5;
}

.wdu-carousel-last-btn,
.wdu-carousel-next-btn {
    height       : 35px;
    width        : 35px;
    background-color: rgba(0, 0, 0, 0.5);
    .w-border-circle();
    .out-shadow-light();
    .center();
    & i {
        transform: scale(1.2);
    }    
}

.wdu-carousel-screen {
    .w-box();
    height: 100%;
    overflow: hidden;
}

.wdu-carousel-film {
    .w-box();
    .flex();
    height: 100%;
    position: relative;
    z-index : 1;
}

.wdu-carousel-film>* {
    min-width: 100%;
    height   : 100%;
}

.wdu-carousel-card {
    position        : relative;
    background-color: rgb(172, 172, 172);
    margin          : 0;
    padding         : 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 1.2em;
    z-index         : -1;
    overflow        : hidden;
}

.wdu-carousel-card img {
    height: 100%;
}

.wdu-carousel-pagenation {
    position       : absolute;
    bottom         : 0;
    margin         : 0 auto;
    width          : 100%;
    height         : 35px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : none;
    z-index        : 5;
}

.wdu-carousel-pagenation-btn {
    .inside-shadow-light();
    display         : inline-block;
    width           : 10px;
    height          : 10px;
    border-radius   : 50%;
    margin          : 0 1%;
    background-color: @button-color-back;
    cursor          : pointer;
}

.wdu-carousel-dot-checked {
    .out-shadow-light();
    transition      : all .3s ease-in-out;
    transform       : scale(1.2);
    background-color: @button-color-front;
}